<template>
	<view class="page">
		
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="main" v-show="classifyShow===0">
			<view class="menu-top">
				<!-- banner -->
				<view class="banner">
					<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
						<swiper-item v-for="(item,index) in swiperList"  @tap="jumpType(item,key1)" :key="index">
							<image :src="item.imgurl"></image>
							<!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
						</swiper-item>
					</swiper>
				</view>
				<!-- 菜单导航 -->
				<view class="menu-nav">
					<scroll-view scroll-x @scroll="ScrollMenu" class="nav-list">
						<view class="nav" ref="nav" :style="navList.length<=10?'flex-direction:row':''">
							<view class="list" v-for="(item,index) in navList"
							@click="onMenu(item.id)"
							:key="item.id">
								<image :src="comm_img_url+'/pro/nav_ico'+(index+1)+'.png'" mode=""></image>
								<text>{{item.name}}</text>
								<!-- <button class="contact" style="position:absolute;left:0;top:0;width:100%;height:100%;border:none;" 
								:plain="true" 
								v-if="item.id==5" 
								type="default" 
								open-type="contact"></button> -->

							</view>
						</view>
					</scroll-view>
					<view class="indicator" v-if="navList.length>10">
						<view class="plan">
							<view class="bar" :style="'left:'+slideNum+'%'"></view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 新人福利 -->
			<view class="fl-box" v-if="swiperList2.length">
				<swiper class="swiper2" circular="true" :indicator-dots="false" :interval="8000" :autoplay="false">
					
					<swiper-item v-for="(item,index) in swiperList2"  @tap="jumpType(item,key1)" :key="index">
						<image :src="item.imgurl" class="s-banner"></image>
					</swiper-item>
				</swiper>
			</view>
		
			<!-- 通知 -->
			<view class="inform">
				<view class="inform-info">
					<view class="picture">
						<image src="/static/gg_ico.png" mode=""></image>
					</view>
					<view class="info">
						<block v-if="noticeList.length">
							<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
								
								<swiper-item  v-for="(item,key1) in noticeList">
									<view class="swiper-item" >
										<text class="one-omit">{{item}}</text>
									</view>
								</swiper-item>
							
							</swiper>
						</block>
						<block v-else>
							<view  class="swiper">
								<view class="swiper-item" >
									<text class="one-omit">暂无公告！</text>
								</view>
							</view>
							
						</block>
					</view>
				</view>
			</view>
			<!-- 为你推荐 -->
			<view class="recommend-info">
				<view class="recommend-title">
					<view class="title">
						<image src="/static/wntj_title.png" mode=""></image>
					</view>
				</view>
				
				<good-list v-if="goodsList.length" :list="goodsList"></good-list>
			</view>
		</view>
    </mescroll-body>
    <!-- <ClassifyData v-show="classifyShow!=0"></ClassifyData> -->
		<!-- tabbar -->
		<TabBar :tabBarShow="2"></TabBar>
		<!-- 活动 -->
		<u-popup :show="/*nCond*/false" bgColor="transparent" mode="center"  @close="close" @open="open" border-radius="0">
			<!-- <u-icon name="close-circle" @click="showPop = false" class="close-cirecle" color="#fff" size="55"></u-icon> -->
			<view class="flex-box hd-box">
				<view class="content">
					
					<image @click="hdJump(notice)" :src="notice.imgurl" class="hd-img" ></image>
					<view class="ico-close"  @click="nCond = false">
						<u-icon name="close-circle" class="close-cirecle" color="#fff" size="30"></u-icon>
					</view>
				</view>
			</view>
		
		</u-popup>
	</view>
</template>

<script>
import TabBar from '../../components/TabBar/TabBar.vue';
// 引入mescroll-mixins.js
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import {apiGoods} from "@/api/mock.js"
import {
	mapState
} from 'vuex'
export default {
  mixins: [MescrollMixin], // 使用mixin
	components:{TabBar},
	data(){
		return{
			notice:{},
			nCond:false,
			comm_img_url:'',
			noticeList:[],
			goods:[],
			swiperList: [
				{
					id: 0,
					type: 'image',
					url: '/static/img/banner_00.png'
				},
				
			],
			swiperList2:[],
			slideNum: 0,
			navList: [
				{
					id: 1,
					name: '护肤百科',
				},{
					id: 2,
					name: '丽人权益',
				},{
					id: 3,
					name: '素材中心',
				},{
					id: 4,
					name: '分享好友',
				},{
					id: 5,
					name: '客服中心',
				}
			],
			goodsList:[
				
			],
			classifyShow: 0,
			// 页面高度
			pageHeight: 500,
			page:1,
			pageSize:10,
		}
	},
	computed: {
		...mapState(['hasLogin','userInfo'])
	},
	onReady() {
		uni.hideTabBar();
		// #ifdef MP
		uni.setNavigationBarTitle({
			title: '首页',
		})
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fe3b0f',
		})
		// #endif
	},
	onLoad() {
		this.comm_img_url = this.$c.appImg
		this.getNotice()
		this.getAds()
		this.getHeng()
		this.getActive()
	},
	onPageScroll(e){
		let scrollTop = e.scrollTop;
		if(scrollTop > 0){
			this.pageHeight = 210;
		}else{
			this.pageHeight = 500;
		}
	},
  onReachBottom(){
    console.log(12333);
  },
	methods:{
		getActive(){
			let _this = this
			this.$u.api.soucePopup().then(res => {
					if (res.status) {
						_this.nCond = true
						_this.notice = res.msg
					}else{
						_this.nCond = false
					}
				})
				.catch(err => {
					console.log(err);
				})
		},
		hdJump(item) {
			if (!this.hasLogin) {
				uni.navigateTo({
					url: '/pages/account/login'
				})
				return
				
			}
			console.log(item)
			let path = item.link
			if (item.link_type == 1) {
				uni.navigateTo({
					url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
				})
			} else if (item.link_type == 2) {
				uni.switchTab({
					url: path
				})
			} else if (item.link_type == 3) {
				uni.navigateTo({
					url: path
				})
				
			}
		},
		jumpType(item,key) {
			console.log('swperClick')
			var path = item.link;
			if (item.link_type == 1) {
				uni.navigateTo({
					url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
				})
			} else if (item.link_type == 2) {
				uni.switchTab({
					url: path
				})
			} else if (item.link_type == 3) {
				uni.navigateTo({
					url: path
				})
			}
		},
		//公告
		getNotice(){
			this.$u.api.souceNotice().then(res => {
					if (res.status) {
						this.noticeList = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
		},
		// 首页广告
		getAds(){
			this.$u.api.souceAds({type:1}).then(res => {
					if (res.status) {
						this.swiperList = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
		},
		// 2首页横幅
		getHeng(){
			this.$u.api.souceAds({type:2}).then(res => {
					if (res.status) {
						this.swiperList2 = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
		},
    /*下拉刷新的回调, 有三种处理方式:*/
    downCallback(){
      this.mescroll.endSuccess();
    },
    /*上拉加载的回调*/
    upCallback(page) {
      //联网加载数据
	  let _this = this
      this.$u.api.goodsListMall({page:this.page}).then(res=>{
		  console.log(res,'商品列表')
      	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
      	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
      
      	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
      	this.mescroll.endByPage(this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
      
      	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
      	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
      
      	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
      	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
        
      	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
      	// this.mescroll.endSuccess(res.list.length);
		if(_this.page == 1){_this.goodsList = [];} //如果是第一页需手动制空列表
		_this.goodsList =  _this.goodsList.concat(res.msg.list); 
		// this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
		return false
      // 	//设置列表数据
  //     	if(this.page == 1||this.page<res.msg.totalPage){
		// 	this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
		// }else{
		// 	this.goodsList = this.goodsList.concat(res.msg.list); // 注意不是this.msgList.concat
		// }
      }).catch(()=>{
      	//联网失败, 结束加载
      	this.mescroll.endErr();
      })
    },
		/**
		 * 菜单导航滚动
		 */
		ScrollMenu(e){
			let scrollLeft = e.target.scrollLeft;
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				let wid = e.target.scrollWidth - data.width - (data.left*2+5);
				this.slideNum = (scrollLeft/wid*300) / 2;
			}).exec();
		},
		/**
		 * 搜索点击
		 */
		onSearch(){
			uni.navigateTo({url:'/pages/search/search'})
		},
		/**
		 * 扫一扫点击
		 */
		onCode(){
			// 只允许通过相机扫码
			uni.scanCode({
				onlyFromCamera: true,
				success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
				}
			});
		},
		/**
		 * 分类点击
		 * @param {Object} item
		 * @param {Number} index
		 */
		onClassify(item,index){
			this.classifyShow = index;
		},
		/**
		 * 跳转点击
		 * @param {String} type 跳转类型
		 */
		onMenu(id){
			switch (id){
				case 1:
					uni.navigateTo({
						url: '/pages/wiki/wiki'
					})
					break;

				case 2:
          uni.navigateTo({
            url: '/pages/joinUs/index?classTab=2'
          })
					/*uni.navigateTo({
						url: '/pages/Equity/Equity'
					})*/
					break;
				case 3:
				uni.navigateTo({
					url: '/pages/sub/extension/extension'
				})
				break;
				case 4:
					if (!this.hasLogin) {
						uni.navigateTo({
							url: '/pages/login/login'
						})
						return
					}
					uni.navigateTo({
						url: '/pages/sub/invite/invite'
					})
				break;
				case 5:
					uni.navigateTo({
						url: '/pages/sub/service/service'
					})
				break;
			
			}
		},
		onSkip(type){
			return false
			switch (type){
				case 'mess':
					uni.navigateTo({
						url: '/pages/Message/Message'
					})
					break;
				case 'paycode':
					uni.navigateTo({
						url: '/pages/PaymentCode/PaymentCode'
					})
					break;
				case 'menu':
					uni.navigateTo({
						url: '/pages/SearchGoodsList/SearchGoodsList'
					})
					break;
				case 'inform':
					break;
				case 'flash':
					uni.navigateTo({
						url: '/pages/FlashSale/FlashSale'
					})
					break;
				case 'GoodChoice':
					uni.navigateTo({
						url: '/pages/GoodChoice/GoodChoice'
					})
					break;
				case 'goods':
					uni.navigateTo({
						url: '/pages/GoodsDetails/GoodsDetails',
						animationType: 'zoom-fade-out',
						animationDuration: 200
					})
					break;
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import 'home.scss';
</style>
